<template>
  <div>
    <div class="wrap">
      <div class="tou">
        <router-link to="/shimingrenzheng_t2">
          <img class="img1" src="../../assets/个人中心/1个人中心/jiantou.png"  @click="ffff"/>
        </router-link>
        <p>身份实名认证</p>
      </div>
      <div class="ID">
        <p>身份信息</p>
        <span>请确保身份证信息真实有效，否则无法通过审核</span>
      </div>
      <ul class="name">
        <li>
          <input type="text"placeholder="您的姓名（请填写身份证上的真实姓名）" />
        </li>
        <li>
          <input type="password"placeholder="您的身份证号（将加密处理）"/>
        </li>
      </ul>
      <div class="hpoto">
        <p>身份证照片</p>
        <span>上传身份证正反面照片让通关更便捷</span>
      </div>
      <ul class="white">
        <li>
          <div>
            <img src="../../assets/个人中心/1个人中心/idz.png"/>
            <p>请上传</p>
          </div>
          <p>*上传前请先查看样张</p>
          <nav>
						<span>
							<img class="img10" src="../../assets/个人中心/1个人中心/weixiaobao.png"/>
						</span>
            <em>
              <img src="../../assets/个人中心/1个人中心/jianjie.png"/>
            </em>

          </nav>
        </li>
        <li class="li2">
          <div>
            <img src="../../assets/个人中心/1个人中心/qingsc.png"/>
            <p>请上传</p>
          </div>
          <p>*查看更多帮助内容</p>
          <nav>
						<span>
							<img class="img10" src="../../assets/个人中心/1个人中心/fanmian.png"/>
						</span>
            <em>
              <img src="../../assets/个人中心/1个人中心/jianjie.png"/>
            </em>
          </nav>
        </li>
      </ul>
      <div class="why">
        <p>为什么需要实名认证？</p>
      </div>
      <ul class="haiguan">
        <li>
          <div></div>
          <p>购买跨境商品需要办理清关手续，需要您上传身份证信息才能确保您的包裹顺利通过海关检查</p>
        </li>
        <li>
          <div></div>
          <p>声明：阿拉灯负责提交信息，并对您的身份信息保密，绝不传播或用于其他地方
            请放心填写。</p>
        </li>
      </ul>
      <div class="bottom">
        <router-link to="person"><div @click="">
          提交
        </div></router-link>
      </div>
    </div>
  </div>
</template>

<script>

  export default{
    methods:{
      ffff:function(){
        this.$router.push("/IDrenzheng2");
      },
      tijiao:function(){
        this.$router.push("/IDrenzheng");
      }
    }
  }
</script>

<style scoped="scoped">

  .wrap{
    width: 100%;
  }
  .tou{
    height: 2.666rem;
    background: #e53e42;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tou .img1{
    width: 0.638rem;
    height: 1.055rem;
    position: absolute;
    left: 0.555rem;
  }
  .tou p{
    position: absolute;
    bottom: 0.972rem;
    height: 0.972rem;
    font-size: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .ID,.hpoto{
    width: 100%;
    height: 1.666rem;
    display: flex;
    align-items: center;
    position: relative;
  }
  .ID p,.hpoto p{
    position: absolute;
    left: 0.555rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .ID span,.hpoto span{
    position: absolute;
    left: 4.083rem;
    height: 0.527rem;
    font-size: 0.5rem;
    line-height: 0.9rem;
    letter-spacing: 0;
    color: #e53e42;
  }
  .hpoto span{
    left: 4.777rem;
    line-height: 0.95rem;
  }
  .name{
    width: 100%;
    background: white;
  }
  .name li{
    width: 100%;
    height: 2.222rem;
    border-bottom: 1px solid #CCCCCC;
    display: flex;
    align-items: center;
  }
  .name li:nth-child(2){
    border: none;
  }
  .name li input{
    width: 100%;
    position: absolute;
    left: 0.555rem;
    font-size: 0.7rem;
  }
  .white{
    width: 100%;
    height: 17.222rem;
    background: white;
    display: flex;
  }
  .white li{
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .white li div{
    position: absolute;
    top: 1.111rem;
    width: 7.777rem;
    height: 5.555rem;
    background-color: #ffffff;
    border-radius: 0.277rem;
    border: solid 1px #cccccc;
    display: flex;
    justify-content: center;
  }
  .white .li2 div{
    border: 1px solid transparent;
  }

  .white li div img{
    position: absolute;
    top: 1.083rem;
    width: 2.944rem;
    height: 2.111rem;
  }
  .white li div p{
    position: absolute;
    top: 3.805rem;
    height: 0.638rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0px;
    color: #cccccc;
  }
  .white li>P{
    position: absolute;
    top: 7.888rem;
    height: 0.527rem;
    font-size: 0.5rem;
    line-height: 1rem;
    letter-spacing: 0;
  }
  .white .li2>p{
    color: #e53e42;
  }
  .white nav{
    position: absolute;
    top: 8.944rem;
    width: 6.111rem;
    height: 7.777rem;
    border-radius: 0.055rem;
    border: solid 1px #cccccc;
    background: white;
  }
  .white nav span{
    display: block;
    width: 100%;
    height: 4.444rem;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .white nav em{
    display: block;
    width: 100%;
    height:3.333rem;
  }
  .white nav em img{
    width: 100%;
    height: 100%;
  }
  .white nav span .img10{
    width: 4.444rem;
    height: 2.722rem;
  }
  .why{
    width: 100%;
    height: 1.111rem;
    background: #f9d3d4;
    margin-top: 0.555rem;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .why p{
    position: absolute;
    height: 0.638rem;
    font-family: MicrosoftYaHei;
    font-size: 0.666rem;
    letter-spacing: 0px;
    color: #e53e42;
    line-height: 1.111rem;
  }
  .haiguan{
    width: 100%;
    height: 4.444rem;
    background: white;
  }
  .haiguan>li{
    width: 100%;
    height: 2.5rem;
    position: relative;
    top: -0.416rem;
  }
  .haiguan li div{
    position: absolute;
    top: 0.75rem;
    left: 0.555rem;
    width: 0.166rem;
    height: 0.166rem;
    background: #808080;
    border-radius: 50%;
  }
  .haiguan li p{
    position: absolute;
    top: 0.361rem;
    left: 1.055rem;
    height: 1.527rem;
    font-family: MicrosoftYaHei;
    font-size: 0.5rem;
    letter-spacing: 0px;
    color: #666666;
  }
  .bottom{
    margin-top:0.555rem;
    width: 100%;
    height: 2.5rem;
    border-top: 1px solid #CCCCCC;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom div{
    width: 5.694rem;
    height: 1.055rem;
    background-color: #e53e42;
    border-radius: 0.527rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.5rem;
    line-height: 1rem;
  }
</style>
